<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<meta name="description" content="">
	<meta name="author" content="">
	<title>班级说说--注册</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		body {
			padding-top: 10px;
		}

		#err {
			display: none;
		}
	</style>
</head>

<body>
	<% include header.ejs %>
		<div class="container jumbotron">
			<h3>欢迎注册</h3>
			<form>
				<div class="form-group">
					<label for="exampleInputEmail1">用户名</label>
					<input type="text" class="form-control" id="username" placeholder="可以是中文，但是不能重复">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">密码</label>
					<input type="password" class="form-control" id="password" placeholder="密码，至少6位">
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox"> 我遵守注册规定
					</label>
				</div>
				<button type="button" class="btn btn-default" id="regist">注册</button>
			</form>
		</div>
		<div class="alert alert-danger" role="alert" id="err"></div>
		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$('input').focus(() => {
				$('#err').fadeOut();
			})
			$('#regist').click(function (param) {
				$.post('/doregist', {
					username: $('#username').val(),
					password: $('#password').val()
				}, function (req) {
					if (req == 'success') {
						alert('注册成功，将回到首页');
						location.href = '/';
					} else if (req == -3) {
						$('#err').fadeIn();
						$('#err').html('网络错误，请稍后再试！')
					} else if (req == -1) {
						$('#err').fadeIn();
						$('#err').html('用户名被占用，请更换')
					}
				})
			})
		</script>
</body>

</html>